<!--********************************************************************
* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_l_echartsEarthquake1"></title>
    <script type="text/javascript" include="papaparse,jquery" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="echarts" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
    var map, url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
    map = L.map('map', {
        center: [32.67, 109.06],
        maxZoom: 18,
        minZoom:3,
        zoom: 4
    });
    var heatMapLayer;
    L.supermap.tiledMapLayer(url).addTo(map);
    addFeature();

    function addFeature() {
        $.get("../data/chinaEarthquake.csv", function (response) {
            var dataObj = Papa.parse(response, {skipEmptyLines: true, header: true});
            var data = dataObj.data;
            //热力图点
            var heatMapPoints = {};
            //柱状图的点
            var barPoints = {};
            for (var i = 0; i < data.length; i++) {
                var date = new Date(data[i].date);
                var month = date.getMonth() + 1;
                var year = date.getFullYear();
                var point = [parseFloat(data[i].X), parseFloat(data[i].Y), parseFloat(data[i].level)];
                if (year > 2007 && year < 2018) {

                    //构造热力图数据
                    if (!heatMapPoints[year]) {
                        heatMapPoints[year] = [point];
                    } else {
                        heatMapPoints[year].push(point);
                    }
                    //构造柱状图数据
                    barPoints[year] = barPoints[year] ? barPoints[year] : {};
                    if (!barPoints[year][month]) {
                        barPoints[year][month] = 1;
                    } else {
                        ++barPoints[year][month];
                    }
                }
            }
            var option = {
                baseOption: {
                    animationDurationUpdate: 1000,
                    animationEasingUpdate: 'quinticInOut',
                    timeline: {
                        axisType: 'category',
                        orient: 'vertical',
                        autoPlay: true,
                        inverse: true,
                        playInterval: 3000,
                        left: null,
                        right: 30,
                        top: 20,
                        bottom: 40,
                        width: 55,
                        height: null,
                        label: {
                            normal: {textStyle: {color: '#ddd'}},
                            emphasis: {textStyle: {color: '#fff'}}
                        },
                        symbol: 'none',
                        lineStyle: {color: '#fff'},
                        checkpointStyle: {color: '#bbb', borderColor: '#777', borderWidth: 2},
                        controlStyle: {
                            showNextBtn: false,
                            showPrevBtn: false,
                            normal: {color: '#666', borderColor: '#666'},
                            emphasis: {color: '#aaa', borderColor: '#aaa'}
                        },
                        data: ['2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']
                    },
                    title: {
                        subtext: resources.text_echartsEarthquake_sub_title,
                    }
                },
                //options的设置
                options: []
            };
            for (var key in heatMapPoints) {
                var barData = [
                    barPoints[key][1], barPoints[key][2], barPoints[key][3],
                    barPoints[key][4], barPoints[key][5], barPoints[key][6], barPoints[key][7],
                    barPoints[key][8], barPoints[key][9], barPoints[key][10], barPoints[key][11], barPoints[key][12]
                ];
                option.options.push({
                    //热力图的配置
                    title: {
                        text: resources.text_l_echartsEarthquake,
                        left: 'center',
                        top: 30,
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    visualMap: {
                        show: false,
                        min: 0,
                        max: 5,
                        seriesIndex: 0,
                        calculable: true,
                        inRange: {
                            color: ['blue', 'green', 'yellow', 'red']
                        }
                    },
                    grid: {
                        left: 50,
                        bottom: '10%',
                        width: '30%',
                        height: '30%',
                        textStyle: {
                            color: "#fff"
                        },
                    },
                    tooltip: {
                        trigger: "item",
                        textStyle: {
                            fontSize: 12
                        },
                        formatter: "{b0}:{c0}"
                    },
                    //bar的x,y坐标
                    xAxis: [{
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                        axisLabel: {color: '#fff'},
                        axisLine: {lineStyle: {color: "#fff"}},
                        name: resources.text_l_echartsEarthquake_x_coordinate
                    }],
                    yAxis: [{
                        type: 'value',
                        splitLine: {show: false},
                        axisLabel: {color: '#fff'},
                        axisLine: {lineStyle: {color: "#fff"}},
                        name: resources.text_echartsEarthquake_sub_title
                    }],
                    series: [
                        //heatmap
                        {
                            type: 'heatmap',
                            coordinateSystem: "leaflet",
                            data: heatMapPoints[key],
                            pointSize: 10,
                            blurSize: 15
                        },
                        //bar
                        {
                            type: 'bar',
                            label: {show: true,
                                position:'top',
                                color:'#fff'
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: 'red'},
                                            {offset: 0.5, color: 'yellow'},
                                            {offset: 1, color: 'red'}
                                        ]
                                    ),
                                    barBorderRadius: 15
                                },
                                emphasis: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: 'red'},
                                            {offset: 0.7, color: 'yellow'},
                                            {offset: 1, color: 'red'}
                                        ]
                                    )
                                }
                            },
                            barWidth: 20,
                            barGap: 5,
                            data: barData
                        },
                        //pie的显示
                        {
                            type: 'pie',
                            radius: ['8%', '20%'],
                            center: ['10%', '25%'],
                            data: [
                                {value: barData[0] + barData[1] + barData[2], name: resources.text_quarter_1},
                                {value: barData[3] + barData[4] + barData[5], name: resources.text_quarter_2},
                                {value: barData[6] + barData[7] + barData[8], name: resources.text_quarter_3},
                                {value: barData[9] + barData[10] + barData[11], name: resources.text_quarter_4},
                            ].sort(function (a, b) { return a.value - b.value; }),
                            roseType: 'angle',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.7)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.7)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'orange',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                })
            }
            heatMapLayer = L.supermap.echartsLayer(option).addTo(map);
        });
    }
</script>
</body>
</html>
